<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FlowPlayer</title>
<script type="text/javascript" src="swfobject.js"></script>
<script  type="text/javascript">
/*
 * Init and setup FlowPlayer.  This example file shows 'advanced' features like
 * playlists and configuring with JavaScript. FlowPlayer.html is a simpler example.
 *
 * NOTE: This file has been tested to work on FireFox only. It has some problems on IE.
 */

var flowPlayer1;
function init() {
	if (document.getElementById) {
		flowPlayer1 = document.getElementById("FlowPlayer");
	}
}

// wait for the page to fully load before initializing
window.onload = init;

function setInitialConfig() {
	fpConf.playList = clips;
	fpConf.autoPlay = false;
	fpConf.autoBuffering = false;
	flowPlayer1.setConfig(fpConf);
}

var clickToPlayUrl = 'http://www.kolumbus.fi/apiirain/video/resources/main_clickToPlay.jpg';
var hondaUrl = 'http://flowplayer.org/video/honda_commercial.flv';
var hollywoodUrl = 'http://flowplayer.org/audio/06-Maiden_goes_to_hollywood.mp3';
var sympathyUrl = 'http://flowplayer.org/audio/01-Sympathy_for_the_soul_of_the_beast.mp3';
var miltonUrl = 'http://vp.video.google.com/videodownload?version=0&secureurl=twAAAD3Nu3qi35Sq20PncHx_N85T906JGae5xZmkTv_R_ZCcDGA0yTapUR0RwupDbpZcNbjY-MdNMAT-VQC4U0TE9SyMNYYG0fdqwToIx6gMunzvEyDd8gwNyiwY-A1-8c4tpls2xEOIv0BZ7sO-aEEGjzV9j16n4enqCZ8SV5898qQ3MjHGsemiY96XrIp9rFSkbKMspA5IpOwOCT4Ts32UnOwdzUnZWuu38dMIRqG9zK15IjdRYyhoOvEhG-AjiRjlrQ&sigh=6Or8xwTb3TIpQZbydtuiroQ_6fk&begin=0&len=1714578&docid=6813529239937418232'; 
var clips = [                      
	{ overlayId: 'play', name: 'ClickToPlay', url: clickToPlayUrl },
	{ name: 'Honda Accord', url: hondaUrl },
	{ name: 'Maiden goes to Hollywood', url: hollywoodUrl, overlay: 'http://www.ironmaiden.com/discography/discography_IMG/powerslave.jpg' },
	{ name: 'Sympathy for the soul of the beast', url: sympathyUrl, overlay: 'http://www.ironmaiden.com/discography/discography_IMG/numberofthebeast.jpg' },
	{ name: 'Milton', url: miltonUrl }
];

var fpConf = {
	showPlayList: false,
	bufferLength: 20,
	loop: false,
	hideControls: false,
	showPlayListButtons: true,
	progressBarColor1: 0xFF0000,
	progressBarColor2: 0xFF0000,
	bufferBarColor1: 0x00FF00,
	bufferBarColor2: 0x00FF00,
	progressBarBorderColor1: 0xAAAAAA,
	progressBarBorderColor2: 0xAAAAAA
}

/*
 * JavaScript event hanlders:
 */
function clipSelected(clipIndex) {
	flowPlayer1.ToClip(clipIndex);
}

function play() {
	flowPlayer1.DoPlay();
	updateIsPlaying();
}

function pause() {
	flowPlayer1.Pause();
	updateIsPlaying();
}

function stop() {
	flowPlayer1.DoStop();
	updateIsPlaying();
}

function updateIsPlaying() {
	var field = document.getElementById("playing");
	field.value = "Playing: " + flowPlayer1.getIsPlaying() + ", paused : " + flowPlayer1.getIsPaused();
}

function seek() {
	var seekTimeField = document.getElementById("seekTime");
	flowPlayer1.Seek(seekTimeField.value);
}

function getTime() {
	var time = flowPlayer1.getTime();
	var timeField = document.getElementById("time");
	timeField.value = time;
}

function getDuration() {
	var value = flowPlayer1.getDuration();
	var field = document.getElementById("duration");
	field.value = value;
}

function getPercentLoaded() {
	var value = flowPlayer1.getPercentLoaded();
	var field = document.getElementById("loaded");
	field.value = value;
}

function replaceConfig() {
	// replace the playlist in our configuration
	fpConf.playList = [                      
	{ name: 'Honda accord', url: 'honda_accord.flv' } ];
	fpConf.autoBuffering = true;
	fpConf.autoPlay = true;
	flowPlayer1.setConfig(fpConf);
}

function setCuePoints() {
	flowPlayer1.addCuePoints([ {time: 2, name: "cue1", parameters: { foo: 1, bar: "foobar" }}, { time: 5, name: "cue2", parameters: { foo: 2, bar: "foobar2" }} ]);
}

/*
 * Flash callback handlers. The player calls these on specific events:
 */

function onClipDone(clip) {
	addClipEvent("clip done : " + describeClip(clip));
}

function onClipChanged(clip) {
	addClipEvent("changed to clip : " + clip.name);
}

function onLoadBegin(clip) {
	//addClipEvent("started loading : " + clip.name);
}

function onStartBuffering(clip) {
	addClipEvent("started buffering : " + clip.name);
}

function onBufferFull(clip) {
	addClipEvent("buffer full for : " + clip.name);
}

function onBufferFlush(clip) {
	addClipEvent("buffer flush for : " + clip.name);
}

function onMetaData(obj) {
	addClipEvent("metadata received : duration " + obj.duration + ", video data rate " + obj.videodatarate + ", audio data rate " + obj.audiodatarate + ", creation date " + obj.creationdate);
}

function onStreamNotFound(clip) {
	addClipEvent("stream not found: " + describeClip(clip));
}

function onPlay(clip) {
	addClipEvent("play: " + clip.name);
}

function onStop(clip) {
	addClipEvent("stop: " + clip.name);
}

function onPause(clip) {
	addClipEvent("paused: " + clip.name);
}

function onResume(clip) {
	addClipEvent("resumed: " + clip.name);
}

function onCuePoint(cuePoint) {
	addClipEvent("cue point received, time: " + cuePoint.time + ", type '" + cuePoint.type + "', name: '" + cuePoint.name + "'" + "', thumb: " + cuePoint.thumb + ", parameters: " + cuePoint.parameters);
}

/*
 * Helpers:
 */
 
function addClipEvent(desc) {
	var events = document.getElementById("events");
	events.appendChild(document.createTextNode(desc));
	events.appendChild(document.createElement("br"));
}

function describeClip(clip) {
	return "Name: " + clip.name + ", baseUrl: " + clip.baseUrl + ", fileName: " + clip.fileName + 
	", start: " + clip.start + ", end: " + clip.end + ", protected: " + clip.protected +
	", linkUrl: " + clip.linkUrl + ", linkWindow: " + clip.linkWindow + ", controlEnabled: " +
	clip.controlEnabled;
}

</script>
</head>
<body bgcolor="#CCCCCC">

	<div id="flowplayerholder">
		This will be replaced by the player. 
	</div>
	<script type="text/javascript">
		// <![CDATA[

	  var fo = new SWFObject("../FlowPlayerDark.swf", "FlowPlayer", "468", "350", "7", "#ffffff", true);
      // need this next line for local testing, it's optional if your swf is on the same domain as your html page
      fo.addParam("allowScriptAccess", "always");
      fo.write("flowplayerholder");

		// ]]>
	</script>
	
	<p>Folliwing links jump within a playlist, requires a playlist configuration in the player. You can initialize the
	player with a playlist <a href="javascript: setInitialConfig()">by pressing this!</a></p>
	<table>
		<tr>
			<td>Splash</td><td><a href="javascript: clipSelected(0)">Go</a></td>
		</tr>
		<tr>
			<td>Honda accord</td><td><a href="javascript: clipSelected(1)">Go</a></td>
		</tr>
		<tr>
			<td>Hollywood (mp3 audio)</td><td><a href="javascript: clipSelected(2)">Go</a></td>
		</tr>
		<tr>
			<td>Sympathy (mp3 audio)</td><td><a href="javascript: clipSelected(3)">Go</a></td>
		</tr>
		<tr>
			<td>Milton</td><td><a href="javascript: clipSelected(4)">Go</a></td>
		</tr>
	</table>

	<p>Alternative method, call playClip() - replaces the existing playlists with one clip.</p>
	<table>
		<tr>
			<td>Honda accord</td><td><a href="javascript: flowPlayer1.playClip(clips[0])">Go</a></td>
		</tr>
		<tr>
			<td>Honda accord</td><td><a href="javascript: flowPlayer1.playClip(clips[1])">Go</a></td>
		</tr>
		<tr>
			<td>Hollywood (mp3 audio)</td><td><a href="javascript: flowPlayer1.playClip(clips[2])">Go</a></td>
		</tr>
		<tr>
			<td>Sympathy (mp3 audio)</td><td><a href="javascript: flowPlayer1.playClip(clips[3])">Go</a></td>
		</tr>
		<tr>
			<td>Milton</td><td><a href="javascript: flowPlayer1.playClip(clips[4])">Go</a></td>
		</tr>
	</table>

	<table>
		<tr>
			<td><a href="javascript: play()">Play</a></td>
			<td><a href="javascript: pause()">Pause</a></td>
			<td><input type="text" id="playing" disabled="true" size="30"></td>
		</tr>
		<tr>
			<td colspan="3"><a href="javascript: stop()">Stop</a></td>
		</tr>
		<tr>
			<td><input type="text" id="seekTime"></td>
			<td colspan="2"><a href="javascript: seek()">Seek</a></td>
		</tr>
		<tr>
			<td><a href="javascript: getTime()">Get time</a></td>
			<td colspan="2"><input type="text" id="time" /></td>
		</tr>
		<tr>
			<td><a href="javascript: getDuration()">Get duration</a></td>
			<td colspan="2"><input type="text" id="duration" /></td>
		</tr>
		<tr>
			<td><a href="javascript: getPercentLoaded()">Get % loaded</a></td>
			<td colspan="2"><input type="text" id="loaded" /></td>
		</tr>
		<tr>
			<td><a href="javascript: replaceConfig()">Replace playlist!</a></td>
			<td colspan="2"><a href="javascript: setInitialConfig()">Back to original playlist!</a></td>
		</tr>
		<tr>
			<td colspan="3"><a href="javascript: setCuePoints()">Set some cuePoints</a></td>
		</tr>
	</table>
	Events:
	<div id="events">
	</div>

</body>
</html>
